<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <RouterLink to="/home" active-class="active">go Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/about" active-class="active"> go About </RouterLink>
      </li>
    </ul>

    <hr />

    <button @click="push">Push Detail</button>
    <button @click="replace">Replace Detail</button>

    <button @click="fn1">Back</button>
    <button @click="fn2">Forward</button>
    <button @click="fn3">go(1)</button>
    <button @click="fn4">go(-1)</button>

    <hr />

    <!-- 防止一个坑位，路由视图，用于在匹配到某条路由地址之后，渲染对应组件的一个东西 -->
    <RouterView />
  </div>
</template>

<script>
export default {
  methods: {
    push() {
      this.$router.push("/detail/100/zs");
    },

    replace() {
      this.$router.replace("/detail/100/zs");
    },

    fn1() {
      this.$router.back(); // 后退一下
    },

    fn2() {
      this.$router.forward(); // 前进一下
    },

    fn3() {
      this.$router.go(1); // 前进一下
    },

    fn4() {
      this.$router.go(-1); // 后退一下
    },
  },
};
</script>

<style>
.router-link-active {
  color: red;
}

.active {
  color: green;
}
</style>
